<template>
  <div class="search-container new-shoping">
    <!-- 顶部 -->
    <!-- <van-nav-bar title="周边店铺">
    </van-nav-bar> -->
    <my-header title="周边店铺" @onClickLeft="$router.push('/search')"/>
    <!-- / 顶部 -->

    <div class="move">
      <!-- 搜索 -->
      <van-search class="new-shoping" v-model="value" placeholder="搜索店铺" input-align="left" shape="round" @click="searchPage">
      </van-search>
      <!-- / 搜索 -->

      <!-- 申请开店 -->
      <div class="apply-store blue" @click="applyStore">申请开店</div>
      <!-- / 申请开店 -->

      <!-- 申请开店 -->
      <div class="push-money blue" @click="pushMoney">推广赚钱</div>
      <!-- / 申请开店 -->
    </div>

    <!-- 宫格 -->
    <van-grid>
      <van-grid-item  class="new-shoping" text="城市" >
        <van-icon slot="left" name="arrow-down" />
      </van-grid-item>
      <van-grid-item  class="new-shoping" text="距离" />
      <van-grid-item  class="new-shoping" text="活动" />
      <van-grid-item  class="new-shoping" text="行业" @click="homeIndustry" />
    </van-grid>
    <!--/ 宫格 -->

    <!-- 店铺详情 -->
    <div class="EachStoresBox">
<div class="EachStores" v-for="(item, i) in myCollection" :key="i">
        <store-info :storesName="item.name" :storesNumber="item.doorNumber" :storesDistance="+item.money" :StoreAddress="item.address">
          <div slot="right" class="rightSlot" :style="{color:item.Collection? 'orange':'blue'}" @click="changeCollection(i)">
                <van-icon :name="item.Collection? 'star':'star-o'"/>
                <span>{{item.Collection? '取消收藏':'收藏店铺'}}</span>
            </div>
        </store-info>
    </div>
    </div>
    <!-- / 店铺详情 -->
  </div>
</template>

<script>
import MyHeader from '../my/components/my-header.vue'
import StoreInfo from '../my/components/store-info.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'searchIndex',
  components: {
    MyHeader,
    StoreInfo
  },
  props: {},
  data () {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState('m_my', ['myCollection'])
  },
  watch: {},
  created () {
    this.change(1)
  },
  mounted () {

  },
  methods: {
    ...mapMutations('m_my', ['changeCollectionStatic']),
    ...mapMutations('m_myStores', ['changeActive']),
    change(i) {
      this.changeActive(i)
    },
    homeIndustry: function () {
      this.$router.replace('/homeIndustry') // 跳转到 homeIndustry 页面 （ 行业 ）
    },
    searchPage: function () {
      this.$router.replace('/searchPage') // 跳转到 searchPage 页面 （ 搜索界面 ）
    },
    applyStore: function () {
      this.$router.replace('/applyStore') // 跳转到 applyStore 页面 （ 申请开店界面 ）
    },
    pushMoney: function () {
      this.$router.replace('/promotionShop') // 跳转到 pushMoney 页面 （ 推广赚钱界面 ）
    },
    changeCollection (i) {
      // console.log(i)
      // console.log(this.myCollection)
      this.changeCollectionStatic(i)
    }
  }
}
</script>

<style scoped lang="less">
.search-container {
  .move {
    position: relative;
    .apply-store {
      position: absolute;
      top: 22px;
      left: 440px;
      font-size: 12px;
    }
    .push-money {
      position: absolute;
      top: 22px;
      left: 580px;
      font-size: 12px;
    }
  }
}
.rightSlot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  span {
      font-size: 25px;
      margin-top: 10px;
    }
    .van-icon {
      color: #ff8a01;
      font-size: 60px;
    }
}
.van-grid {
  margin-bottom: 50px;
}
.EachStoresBox {
  margin-bottom: 140px;
}
/deep/.van-icon-arrow-left {
  color: #02b6fd !important;
}
</style>
